<template>
  <div class="investmentprojectsDetails">
    <van-nav-bar title="投资详情" :left-arrow="true" @click-left="onClickLeft" />
    <div class="header" @click="detailbtn">
      <van-swipe class="bannder" height="130" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <van-image :src="require('@/assets/images/home/cell1.png')" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image :src="require('@/assets/images/home/cell1.png')" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image :src="require('@/assets/images/home/cell1.png')" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image :src="require('@/assets/images/home/cell1.png')" />
        </van-swipe-item>
      </van-swipe>
      <p class="title">新潮京东果业种植基地项目 【新手体验项目】</p>
      <ul class="list clearfix">
        <li>
          <p>项目规模</p>
          <span>¥800.00万元</span>
        </li>
        <li>
          <p>每期分红</p>
          <span>2.00元起</span>
        </li>
        <li>
          <p>投资期限</p>
          <span>1天</span>
        </li>
      </ul>
      <div class="progresscell">
        <div class="progressbox">
          <div class="progress"></div>
        </div>
        <div class="name">50%</div>
      </div>
    </div>
    <div class="content">
      <van-cell-group>
        <van-cell title="分红方式" value="每天返息，到期还本" />
        <van-cell title="起投金额" value="200.00元" />
        <van-cell title="担保机构" value="中国太平洋保险（集团）股份有限公司" />
        <van-cell title="投资零风险" value="本金保障" />
      </van-cell-group>
    </div>
    <div class="detail">
      <div class="detail_header">
        <div class="detail_title">项目信息投资详情</div>
        <div class="jt" @click="show=!show">
          <span v-show="!show">展开</span>
          <span v-show="show">收起</span>
          <img v-show="!show" src="@/assets/images/investmentprojects/shouqi.png" />
          <img class="show" v-show="show" src="@/assets/images/investmentprojects/shouqi.png" />
        </div>
      </div>
      <van-cell-group v-show="show">
        <van-cell title="项目名称" value="果业种植基地项目【新手体验项目】" />
        <van-cell title="项目金额" value="800.00万元人民币" />
        <van-cell title="每天分红" value="按每日1.00%的收益(保本保息)" />
        <van-cell title="投资金额" value="最低起投200.00元" />
        <van-cell title="项目期限" title-class="label" value label="一个自然日：(一个自然日为一天包含节假日)" />
        <van-cell title title-class="label" value label="收益结算：每日分红2.00元*1天=总收益2元" />
        <van-cell title title-class="label" value label="还款方式：每天返息，到期还本 节假日照常收益" />
        <van-cell
          title="结算时间"
          title-class="label"
          value
          label="今日15点投资，次日15点系统自动计息结算收益(丽日在 15:00成功投资，则在下个自然日15:00收到分红)，到期 系统将当日分红和产品本金一起返还到您的会员账号中；"
        />
        <van-cell title="可投金额" title-class="label" value label="投资期间只要产品为投满，投资者均可自由投资；" />
        <van-cell
          title="安全保障"
          title-class="label"
          value
          label="中国太平洋保险(集团)股份有限公司对平台上的每一笔 投资提供100%本金保障，平台设立风险备用金，对本 金承诺全额垫付；"
        />
        <van-cell
          title="项目概述："
          title-class="label"
          value
          label="本项目筹集资金800.00万元人民币，投资本项目9按每 日分红2.00元/天）项目周期为1个自然日，所筹集资金 用于该项目直投运作，作为投资者分红固定且无任何风 险，所操作一切风险借由公司于担保公司一律承担，投 资者不需要承担任何风险。"
        />
        <van-cell
          title="推荐奖励："
          title-class="label"
          value
          label="在会员中心最下面（邀请好友）转发到您的朋友圈里， 只要您朋友通过邀请二维码注册的为一级，充值并成功 投资一次行还款项目，您就可以得到按投资金额2%的 奖励，注册成功后，系统自动赠送！"
        />
      </van-cell-group>
    </div>
    <div style="height:45px;"></div>
    <van-button type="primary" class="btnclass">马上投资</van-button>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  name: "investmentprojectsDetails",
  components: {},
  computed: {},
  data() {
    return {
      show: false,
    };
  },

  mounted() {},
  created() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
    detailbtn() {
      this.$router.push({
        path: "/investmentprojectsDetails",
        query: {},
      });
    },
  },
};
</script>

<style scoped lang="less">
.investmentprojectsDetails {
  width: 100%;
  height: 100%;
  background: #f7f8f9;
  .header {
    padding: 6px 18px;
    background: #ffffff;

    box-shadow: 0px 2px 12px 2px rgba(0, 0, 0, 0.06);
    overflow: hidden;

    .bannder {
      border-radius: 4px;
      overflow: hidden;
    }
    .title {
      font-family: PingFangSC, PingFangSC-Medium;
      font-size: 15px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #6a6a6a;
      margin: 8px 0px 2px 0px;
    }
    .list {
      margin: 19px 0 10px 0;
      li {
        float: left;
        border-right: 1px solid rgba(151, 151, 151, 0.18);
        p {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #787878;
          margin-bottom: 5px;
        }
        span {
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #000000;
        }
      }
      li:first-child {
        width: 33%;
        text-align: left;
        p {
          text-align: left;
        }
      }
      li:last-child {
        width: 28%;
        text-align: left;
        p {
          text-align: left;
          margin-left: 40%;
        }
        span {
          margin-left: 40%;
        }
        border-right: none;
      }
      li:nth-child(2) {
        width: 38%;
        text-align: center;
        p {
          text-align: center;
        }
      }
    }
    .progresscell {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .progressbox {
        margin: 10px 8px 10px 0px;
        width: 90%;
        height: 3px;
        border-radius: 9px;
        background: #f0f6fe;
        position: relative;
        text-align: center;
        overflow: hidden;
        .progress {
          width: 40%;
          position: absolute;
          left: 0;
          top: 0;
          height: 3px;
          background: linear-gradient(270deg, #40a4f2, #3d67e8);
        }
        span {
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: center;
          color: #3d67e8;
        }
      }
      .name {
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #2d73ff;
      }
    }
    .tagbox {
      margin: 8px;
      span {
        display: inline-block;
        background: #efefef;
        border-radius: 2px;
        padding: 5px;
        margin-right: 5px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #d2a775;
      }
    }
  }
  .content {
    background: #ffffff;
    margin-top: 8px;

    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
  }
  .detail {
    background: #ffffff;
    margin-top: 8px;
    .detail_header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 18px 18px 18px 14px;
      .detail_title {
        padding: 2px 0 0 10px;
        font-size: 15px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
        border-left: 3px solid #bf9f42;
      }
      .jt {
        font-size: 15px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #bf9f42;
        vertical-align: middle;
        line-height: 12px;
        img {
          width: 15px;
          height: 8px;
          vertical-align: middle;
          margin-left: 5px;
          margin-top: -2px;
        }
      }
    }
  }
  .van-cell__value {
    min-width: 70%;
    span {
      display: inline-block;
      text-align: left;
      word-break: break-all;
    }
  }
  .label {
    min-width: 100%;
  }
  .btnclass {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: linear-gradient(90deg, #caa262 3%, #e2c397);
    border: none;
    color: #7d5319;
    font-size: 20px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    letter-spacing: 2px;
  }
  .show {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* IE 9 */
    -moz-transform: rotate(180deg); /* Firefox */
    -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
    -o-transform: rotate(180deg);
  }
}
</style>